import React, {useEffect, useState} from 'react';
import {Table, Button, message, Modal, Form, Input, Select, DatePicker, Tooltip, InputNumber, Tabs, Row, Col} from 'antd';
import {connect} from 'react-redux';
import req, {get, post} from '../../../utils';
import {mUrl} from "../../../config";
import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
import moment from "moment";
import {Search,defaultPagination} from "../publicComponents";
import utils from "../../../utils/utils";
import {format} from "echarts/src/export";

const TabPane = Tabs.TabPane;
const {RangePicker} = DatePicker;
const advertisingList = [
    {value: 1, name: '首页'},
    {value: 2, name: '分类一'},
    {value: 3, name: '分类二'},
    {value: 4, name: '分类三'},
];
const Page = (props) => {
    return (
        <div style={{padding: 14, background: '#fff', minHeight: 360}}>
            <Tabs className={'advertising-tabs'} type="card">
                <TabPane tab={'广告管理'} key={'1'}>
                    <AdvertisingRanking/>
                </TabPane>
                <TabPane tab={'广告位设置'} key={'2'}>
                    <AdvertisingSet/>
                </TabPane>
                {/*<TabPane tab={'用户广告申请管理'} key={'3'}>*/}
                {/*    <AdvertisingApply/>*/}
                {/*</TabPane>*/}
            </Tabs>
        </div>
    );
};

//广告管理
const AdvertisingRanking = () => {
    const [loading, setLoading] = useState(false); // 加载
    const [dataList, setDataList] = useState([]); // 列表
    const [advertisingVisible, setAdvertisingVisible] = useState(false);
    const [pagination, setPagination] = useState(Object.assign({}, defaultPagination)); // 页码
    const [advertisingDate, setAdvertisingDate] = useState({}); // 点击新增还是修改
    const [form] = Form.useForm();

    const columns = [
        {
            title: '序号',
            dataIndex: 'advertiapplyid',
            align: 'center',
            width: 70,
            render: (text, record, index) => ((pagination.pageSize * (pagination.current ? pagination.current - 1 : 0)) + index + 1)
        },
        {
            title: '操作',
            align: 'center',
            render: data => {
                if (data.applytype === 1 && data.advertiapplystate === 0) {
                    return (
                        <div>
                            <Button
                                size='small'
                                type={'primary'}
                                className='btnRight'
                                onClick={() => handleReturn(data, 1)}>
                                确定
                            </Button>
                            <Button
                                size='small'
                                type={'danger'}
                                className='btnRight'
                                onClick={() => handleReturn(data, -2)}>
                                取消并退款
                            </Button>
                        </div>
                    );
                }
                if (data.applytype === 2) {
                    return (<div>
                        <Button size='small'
                                type={'primary'}
                                className='btnRight'
                                onClick={() => {
                                    setAdvertisingVisible(true);
                                    setAdvertisingDate(data);
                                }}>编辑</Button>
                        <Button size='small'
                                type={'danger'}
                                className='btnRight'
                                onClick={() => handleReturn(data, -2)}>删除</Button>
                    </div>);
                }
                return <div/>;
                return (<div>
                    <Button size='small'
                            type={'primary'}
                            className='btnRight'
                            onClick={() => {
                                setAdvertisingVisible(true);
                                setAdvertisingDate(data);
                            }}>编辑</Button>
                    <Button size='small'
                            type={'danger'}
                            className='btnRight'
                            onClick={() => handleReturn(data, -2)}>删除</Button>
                </div>);
            }
        },
        {
            title: '状态',
            dataIndex: 'advertiapplystate',
            width: 80,
            align: 'center',
            render: isable => {
                let text = '投放中';
                if (isable === '0') {
                    text = '待审核';
                } else if (isable === '-1') {
                    text = '已结束';
                }
                return text;
            },
        }, {
            title: '申请类型',
            dataIndex: 'applytype',
            width: 80,
            align: 'center',
            render: isable => {
                let text = '小程序';
                if (isable === 2) {
                    text = '后台';
                }
                return text;
            },
        },
        {
            title: '广告位置',
            dataIndex: 'advertiapplystate',
            width: 120,
            align: 'center',
            render: advertising => {
                let text = '';
                const value = advertisingList.filter((item) => item.value === advertising);
                if (value.length) {
                    text = value[0].name;
                }
                return text;
            },
        },
        {
            title: '排名',
            dataIndex: 'sort',
            align: 'center',
        },
        {
            title: '广告周期/天',
            dataIndex: 'longtimes',
            align: 'center',
            render: days => {
                return days + '天';
            },
        },
        {
            title: '广告费/元',
            dataIndex: 'cost',
            align: 'center',
        },
        {
            title: '厂家名称',
            dataIndex: 'orgname',
            align: 'center',
        },
        {
            title: '有效时间',
            align: 'center',
            render: (data) => {
                return (
                    <div>
                        {utils.getDate(data.advertistarttime)}至{utils.getDate(data.advertiendtime)}
                    </div>
                );
            }
        },
        {
            title: '备注说明',
            dataIndex: 'remark',
            align: 'center',
            render: remark => {
                let text = remark || '--';
                return (
                    <Tooltip placement={'topLeft'} title={remark}>
                        {text.length > 15 ? text.substr(0, 15) + '...' : text}
                    </Tooltip>
                );
            }
        },
        {
            title: '创建人',
            dataIndex: 'createuser',
            align: 'center',
        },
        {
            title: '创建时间',
            dataIndex: 'createtime',
            align: 'center',
            render: time => utils.getDate(time)
        }
    ];

    useEffect(() => {
        fetch();
    }, []);

    const fetch = (params = {}) => {
        let start = 1;
        if (params.startList > 1) {
            start = params.startList;
        }
        setLoading(true);
        get(mUrl.searchAdvertiapplyList, {pageNo: start, pageSize: pagination.pageSize,}).then((res) => {
            setLoading(false);
            const {list = [], count = 0} = res.data;
            pagination.total = count;
            setPagination(pagination);
            setDataList(list);
        });
    };

    // 分页、排序、筛选变化时触发
    const handleTableChange = (page) => {
        pagination.current = page.current;
        pagination.pageSize = page.pageSize;
        setPagination(pagination);
        fetch({
            startList: pagination.current
        });
    };
    
    //启用停用
    const handleReturn = async (data, advertiapplystate) => {
        let text = advertiapplystate === 1 ? '通过' : '取消并退款';
        Modal.confirm({
            title: '提示',
            content: <span>是否确定将该广告申请<span style={{color: 'red'}}>{text}？</span></span>,
            onOk: async () => {
                const {state} = await get(mUrl.udAdvertiapply, {
                    advertiapplyid: data.advertiapplyid,
                    advertiapplystate
                });
                if (state === 1) {
                    message.success("成功");
                    fetch();
                }
            }
        });
    };
    
    return (
        <div style={{padding: 14, background: '#fff', minHeight: 360}}>
            <label><p>广告管理 / 广告管理</p></label>
            <div style={{marginBottom: 10}}>
                <Button style={{marginRight: 10}}
                        type={'primary'}
                        className='btnRight'
                        onClick={() => {
                            setAdvertisingVisible(true);
                        }}
                >
                    <PlusOutlined/>新建
                </Button>
                <Button
                    onClick={() => fetch()}
                    type={'primary'}
                >
                    <ReloadOutlined />刷新
                </Button>
            </div>
            <Table size="small"
                   dataSource={dataList}
                   rowKey={record => record.advertiapplyid}
                   columns={columns}
                   pagination={pagination}
                   loading={loading}
                   onChange={handleTableChange}
                   bordered
            />
            <UserAdvertisingModal
                detail={advertisingDate}
                form={form}
                visible={advertisingVisible}
                onCancel={() => {
                    form.resetFields();
                    setAdvertisingVisible(false);
                }}
                onSubmit={() => {
                    fetch();
                    setAdvertisingVisible(false);
                }}
            />
        </div>
    );
};

//广告位设置
const AdvertisingSet = () => {
    const [loading, setLoading] = useState(false); // 加载
    const [dataList, setDataList] = useState([]); // 列表
    const [advertisingVisible, setAdvertisingVisible] = useState(false);
    const [pagination, setPagination] = useState(Object.assign({}, defaultPagination)); // 页码
    const [advertisingDate, setAdvertisingDate] = useState({}); // 点击新增还是修改
    const [form] = Form.useForm();

    const columns = [
        {
            title: '序号',
            key: 'advertisetingid',
            align: 'center',
            width: 80,
            render: (text, record, index) => index + 1
        },
        {
            title: '操作',
            align: 'center',
            render: data => {
                let text;
                let isable;
                let color;
                if (data.advertisetingstate === 1) {  //是否启用(0,停用 1,启用)
                    text = '停用';
                    isable = 0;
                    color = 'red';
                } else {
                    text = '启用';
                    isable = 1;
                    color = '#169bd5';
                }
                return (<div>
                    <Button size='small'
                            type={'primary'}
                            className='btnRight'
                            onClick={() => {
                                setAdvertisingDate(data);
                                setTimeout(() => {
                                    setAdvertisingVisible(true);
                                }, 500);
                            }}>修改</Button>
                    <Button
                        size='small'
                        type={'danger'}
                        className='btnRight'
                        onClick={() => handleReturn(data.advertisetingid, 2)}>删除</Button>
                    <Button
                        size='small' style={{backgroundColor: color, color: '#fff'}}
                        className='btnRight'
                        onClick={() => handleReturn({
                            ...data,
                            advertisetingstate: isable,
                        }, 1)}>
                        {text}
                    </Button>
                </div>);
            }
        },
        {
            title: '状态',
            dataIndex: 'advertisetingstate',
            width: 80,
            align: 'center',
            render: isable => {
                let text = '投放中';
                if (isable === 0) {
                    text = '已结束';
                }
                return text;
            },
        },
        {
            title: '广告位',
            dataIndex: 'advertisetingtype',
            width: 150,
            ellipsis: {
                showTitle: false,
            },
            align: 'center',
            render: advertising => {
                let text = '';
                const value = advertisingList.filter((item) => item.value === advertising);
                if (value.length) {
                    text = value[0].name;
                }
                return text;
            },
        },
        {
            title: '排名',
            dataIndex: 'sort',
            align: 'center',
        },
        {
            title: '广告费/        元',
            dataIndex: 'cost',
            align: 'center',
            // render: cost => {
            //     return cost + '元';
            // },
        },
        {
            title: '周期/天',
            dataIndex: 'longtimes',
            align: 'center',
            // render: days => {
            //     return days + '天';
            // },
        },
        {
            title: '备注说明',
            dataIndex: 'remark',
            align: 'center',
            render: remark => {
                let text = remark || '--';
                return (
                    <Tooltip placement={'topLeft'} title={remark}>
                        {text.length > 15 ? text.substr(0, 15) + '...' : text}
                    </Tooltip>
                );
            }
        },
        {
            title: '创建人',
            dataIndex: 'createuser',
            align: 'center',
        },
        {
            title: '创建时间',
            dataIndex: 'createtime',
            align: 'center',
            render: time => utils.getDate(time)
        }
    ];

    useEffect(() => {
        fetch();
    }, []);

    const fetch = (params = {}) => {
        let start = 1;
        if (params.startList > 1) {
            start = params.startList;
        }
        setLoading(true);
        get(mUrl.searchAdvertisetingList, {pageNo: start, pageSize: pagination.pageSize}).then((res) => {
            setLoading(false);
            const {list = [], count = 0} = res.data;
            pagination.total = count;
            setPagination(pagination);
            setDataList(list);
        });
    };

    // 分页、排序、筛选变化时触发
    const handleTableChange = (page, filters, sorter) => {
        pagination.current = page.current;
        pagination.pageSize = page.pageSize;
        setPagination(pagination);
        fetch({
            startList: pagination.current
        });
    };

    // useEffect(() => {
    //     fetch();
    // }, []);

    //启用停用
    const handleReturn = async (value, id) => {
        if (id === 2) {
            Modal.confirm({
                title: `提示`,
                content: '是否删除改广告位',
                onOk: () => {
                    get(mUrl.deAdvertiseting, {advertisetingid: value}).then((res) => {
                        if (res.state === 1) {
                            fetch();
                        }
                    });
                }
            });
        } else {
            let text = value.advertisetingstate === 1 ? '启用' : '停用';
          
            Modal.confirm({
                title: `提示`,
                content: '是否' + text + '该广告位',
                onOk: () => {
                    post(mUrl.upAdvertiseting, value).then((res) => {
                        if (res.state === 1) {
                            fetch();
                        }
                    });
                }
            });
        }
    };
    
    return (
        <div style={{padding: 14, background: '#fff'}}>
            <label><p>广告管理 / 广告位设置</p></label>
            <div style={{marginBottom: 10}}>
                <Button style={{marginRight: 10}}
                        type={'primary'}
                        className='btnRight'
                        onClick={() => {
                            setAdvertisingDate({});
                            setAdvertisingVisible(true);
                        }}
                >
                    <PlusOutlined/>新建
                </Button>
                <Button
                    onClick={() => fetch()}
                    type={'primary'}
                >
                    <ReloadOutlined />刷新
                </Button>
            </div>
            <Table size="small"
                   dataSource={dataList}
                   rowKey={record => record.advertisetingid}
                   columns={columns}
                   pagination={pagination}
                   loading={loading}
                   onChange={handleTableChange}
                   bordered
            />
            <AdvertisingSetModal
                detail={advertisingDate}
                form={form}
                visible={advertisingVisible}
                onCancel={() => {
                    setAdvertisingVisible(false);
                }}
                onSubmit={() => {
                    fetch();
                    setAdvertisingVisible(false);
                }}
            />
        </div>
    );
};

//用户广告申请管理
const AdvertisingApply = () => {
    const [loading, setLoading] = useState(false); // 加载
    const [dataList, setDataList] = useState([]); // 列表
    const [advertisingVisible, setAdvertisingVisible] = useState(false);
    const [pagination, setPagination] = useState(Object.assign({}, defaultPagination)); // 表格分页
    const [advertisingDate, setAdvertisingDate] = useState(false); // 点击新增还是修改
    const [form] = Form.useForm();

    const columns = [
        {
            title: '序号',
            dataIndex: 'advertising_id',
            responsive: ['sm'],
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            width: 100,
            render: (text, record, index) => ((pagination.pageSize * (pagination.current ? pagination.current - 1 : 0)) + index + 1)
        },
        {
            title: '操作',
            ellipsis: true,
            responsive: ['lg'],
            align: 'center',
            width: 250,
            render: data => {
                return (
                    data.isable !== '1' &&
                    <div>
                        <Button
                            size='small'
                            type={'primary'}
                            className='btnRight'
                            onClick={() => {
                            }}>
                            确定
                        </Button>
                        <Button
                            size='small'
                            type={'danger'}
                            className='btnRight'
                            onClick={() => handleReturn({
                                advertising_id: data.advertising_id,
                                isable: '-2',
                                advertising_username: data.advertising_username,
                                id: 2
                            })}>
                            取消并退款
                        </Button>
                    </div>
                );
            }
        },
        {
            title: '状态',
            dataIndex: 'advertisetingstate',
            align: 'center',
            render: isable => {
                let text = '待审批';
                if (isable === '1') {
                    text = '已通过';
                } else if (isable === '-2') {
                    text = '已取消退款';
                }
                return text;
            },
        },
        {
            title: '广告位',
            dataIndex: 'advertisetingtype',
            width: 150,
            align: 'center',
            render: advertising => {
                let text = '';
                const value = advertisingList.filter((item) => item.value === advertising);
                if (value.length) {
                    text = value[0].name;
                }
                return text;
            },
        },
        {
            title: '排位',
            dataIndex: 'sort',
            align: 'center',
        },
        {
            title: '周期/天',
            dataIndex: 'longtimes',
            align: 'center',
            // render: days => {
            //     return days + '天';
            // },
        },
        {
            title: '预计广告时间',
            dataIndex: 'advertising_time',
            align: 'center',
        },
        {
            title: '广告费用/元',
            dataIndex: 'advertising_price',
            responsive: ['sm'],
            ellipsis: {
                showTitle: false,
            },
            align: 'center',
            // render: days => {
            //     return days + '天';
            // },
        },
        {
            title: '申请人',
            dataIndex: 'admin_name',
            responsive: ['sm'],
            ellipsis: {
                showTitle: false,
            },
            align: 'center',
        },
        {
            title: '联系方式',
            dataIndex: 'phone',
            responsive: ['sm'],
            ellipsis: {
                showTitle: false,
            },
            align: 'center',
        },
        {
            title: '备注说明',
            dataIndex: 'advertising_remark',
            responsive: ['sm'],
            ellipsis: {
                showTitle: false,
            },
            align: 'center',
            render: remark => {
                let text = remark || '--';
                return (
                    <Tooltip placement={'topLeft'} title={remark}>
                        {text.length > 15 ? text.substr(0, 15) + '...' : text}
                    </Tooltip>
                );
            }
        },
        {
            title: '审批人',
            dataIndex: 'approver_name',
            responsive: ['sm'],
            ellipsis: {
                showTitle: false,
            },
            align: 'center',
        },
        {
            title: '审批时间',
            dataIndex: 'advertising_time',
            responsive: ['sm'],
            ellipsis: {
                showTitle: false,
            },
            align: 'center',
        }
    ];

    const fetch = async (params={}) => {
        let start = 1;
        if (params.startList > 1) {
            start = params.startList;
        }
        setLoading(true);
        get(mUrl.searchAdvertiapplyList, {pageNo: start, pageSize: pagination.pageSize,}).then((res) => {
            setLoading(false);
            const {list = [], count = 0} = res.data;
            pagination.total = count;
            setPagination(pagination);
            setDataList(list);
        });
    };

    // 分页、排序、筛选变化时触发
    const handleTableChange = (page) => {
        this.pagination.current = page.current;
        pagination.pageSize = page.pageSize;
        setPagination(pagination);
        fetch({
            startList: pagination.current
        });
    };

    useEffect(() => {
        fetch();
    }, []);

    //启用停用
    const handleReturn = async (data) => {
        // let text = advertiapplystate === 1 ? '通过' : '取消并退款';
        // Modal.confirm({
        //     title: '提示',
        //     content: <span>是否确定将该广告申请<span style={{color: 'red'}}>{text}？</span></span>,
        //     onOk: async () => {
        //         const {state} = await get(mUrl.udAdvertiapply, {
        //             advertiapplyid: data.advertiapplyid,
        //             advertiapplystate
        //         });
        //         if (state === 1) {
        //             message.success("成功");
        //             fetch();
        //         }
        //     }
        // });
    };

    const onSearch = (value) => {
        fetch(value);
    };
    
    const onReset = () => {
        fetch({});
    };

    return (
        <div style={{padding: 14, background: '#fff', minHeight: 360}}>
            <label><p>广告管理 / 用户广告申请管理</p></label>
            {/*<SearchList onSubmit={onSearch}/>*/}
            <Search
                onSearch={onSearch}
                onReset={onReset}
                searchData={[
                    {
                        span: 4, key: 'status', name: '状态', component: (
                            <Select
                                placeholder="请选择"
                                showSearch={true}>
                                <Select.Option value={''}>全部</Select.Option>
                                <Select.Option value={'1'}>待审批</Select.Option>
                                <Select.Option value={'2'}>已通过</Select.Option>
                                <Select.Option value={'3'}>已取消</Select.Option>
                            </Select>
                    )
                    },
                    {
                        span: 6, key: 'proposer', name: '申请人', component: (
                            <Input placeholder={'申请人/联系方式'}/>
                        )
                    },
                    {
                        span: 4, key: 'paseuser', name: '审批人', component: (
                            <Input placeholder={'请输入审批人'}/>
                        )
                    }
                ]}
            />
            <Table size="small"
                   scroll={{x: 2000, y: 600}}
                   dataSource={dataList}
                   rowKey={record => record.advertising_id}
                   columns={columns}
                   pagination={pagination}
                   loading={loading}
                   onChange={handleTableChange}
                   bordered
            />
        </div>
    );
};

const UserAdvertisingModal = ({visible, detail = {}, onSubmit, onCancel, form}) => {
    const [dataSource, setDataSource] = useState([]);
    const [orgname, setOrgname] = useState([]);
    const [settingList, setSettingList] = useState([]);
    const [reload, setReload] = useState([]);
    useEffect(() => {
        if (visible) {
            search();
            if (detail.advertiapplyid) {
                form.setFieldsValue({
                    orgid: detail.orgid,
                    advertisetingid: detail.advertisetingid,
                    sort: detail.sort,
                    longtimes: detail.longtimes,
                    cost: detail.cost,
                    time: [moment(detail.advertistarttime), moment(detail.advertiendtime)],
                    remark: detail.remark,
                });
            }
        }
    }, [visible]);

    const searchSetting = (type) => {
        get(mUrl.searchAdvertisetingList, {pageNo: 1, pageSize: 1000, advertisetingtype: type}).then((res) => {
            if (res.state === 1) {
                const {list = []} = res.data;
                setSettingList(list);
                form.setFieldsValue({
                    sort: undefined,
                    longtimes: undefined,
                    cost: undefined,
                });
            }
        });
    };

    const onFinish = (value) => {
        let url = mUrl.addadvertiapply;
        if (detail.advertiapplyid) {
            url = mUrl.upAdvertiapply;
            value.advertiapplyid = detail.advertiapplyid;
        }
        value.orgname = orgname;
        const index = advertisingList.findIndex((item) => item.value === value.advertisetingtype);
        if (index !== -1) {
            value.advertisetingname = advertisingList[index].name;
        }
        const list = catchSetting(settingList);
        value.advertisetingid = list[0].advertisetingid;
        value.advertistarttime = moment(value.time[0]._d).format('YYYY-MM-DD');
        value.advertiendtime = moment(value.time[1]._d).format('YYYY-MM-DD');
        value.advertiapplystate = 1;
        value.applytype = 2;
        post(url, value).then((res) => {
            if (res.state === 1) {
                message.success('成功');
                onSubmit();
            }
        });
    };

    const search = (value) => {
        fetch({orgname: value});
    };

    const fetch = (params = {}, select = {}) => {
        let start = 1;
        if (params.startList > 1) {
            start = params.startList;
        }
        get(mUrl.searchOrganizationList, {pageNo: start, pageSize: 20, ...params}).then((res) => {
            const {list = []} = res.data;
            if (select.orgid) {
                const index = list.findIndex((item) => item.orgid === select.orgid);
                if (index !== 1) {
                    list.unshift(select);
                }
            }
            setDataSource(Object.assign([], list));
        });
    };

    const catchSetting = (settingList) => {
        const {
            sort,
            longtimes,
            cost,
        } = form.getFieldsValue([
            'sort',
            'longtimes',
            'cost',
        ]);
        return settingList.filter((item) => {
            if (item.advertisetingstate === 0) {
                return false;
            }
            if (sort && item.sort !== sort) {
                return false;
            }
            if (longtimes && item.longtimes !== longtimes) {
                return false;
            }
            return !(cost && item.cost !== cost);
            // if (cost && item.cost !== cost) {
            //     return false;
            // }
        });
    };

    const cleanRepeat = (settingList, type) => {
        let list = [];
        if (settingList.length > 1) {
            settingList.forEach((item) => {
                if (list.findIndex((lItem) => lItem[type] === item[type]) === -1) {
                    list.push(item);
                }
            });
        } else {
            list = settingList;
        }
        return list.map((item, index) => {
            return (
                <Select.Option
                    key={index + '' + type} value={item[type]}>
                    {item[type]}
                </Select.Option>
            );
        });
    };

    const list = catchSetting(Object.assign([], settingList));
    return (
        <Modal
            getContainer={false}
            visible={visible}
            title={detail.advertisetingid ? '修改广告位' : '新增广告位'}
            onCancel={onCancel}
            footer={null}
        >
            <div>
                <Form form={form} onFinish={onFinish}>
                    <Form.Item name={"orgid"}
                               label={'厂家名称'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请选择厂家名称'}]}
                               style={{marginBottom: 15}}>
                        <Select
                            filterOption={false}
                            onChange={(value, option = {}) => {
                                setOrgname(option.children || '');
                            }}
                            showSearch onSearch={search}
                            style={{width: 200}} placeholder={'请选择'}>
                            {
                                dataSource.map((item) => {
                                    return (
                                        <Select.Option
                                            key={item.orgid} value={item.orgid}>
                                            {item.orgname}
                                        </Select.Option>
                                    );
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name={"advertisetingtype"}
                               label={'广告位'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请选择'}]}
                               style={{marginBottom: 15}}>
                        <Select
                            onSelect={(value) => searchSetting(value)}
                            style={{width: 150}} placeholder={'请选择'}>
                            {
                                advertisingList.map((item) => {
                                    return (
                                        <Select.Option
                                            key={item.value} value={item.value}>
                                            {item.name}
                                        </Select.Option>
                                    );
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name={"sort"}
                               label={'排名'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请输入排名'}]}
                               style={{marginBottom: 15}}>
                        <Select allowClear
                                onChange={() => setReload(!reload)}
                                style={{width: 150}} placeholder={'请选择'}>
                            {cleanRepeat(Object.assign([], list), 'sort')}
                        </Select>
                    </Form.Item>
                    <Form.Item name={"longtimes"}
                               label={'广告周期'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请输入广告周期'}]}
                               style={{marginBottom: 15}}>
                        <Select allowClear
                                onChange={() => setReload(!reload)}
                                style={{width: 150}} placeholder={'请选择'}>
                            {cleanRepeat(Object.assign([], list), 'longtimes')}
                        </Select>
                    </Form.Item>
                    <Form.Item name={"cost"}
                               label={'广告费用'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请输入广告费用'}]}
                               style={{marginBottom: 15}}>
                        <Select
                            allowClear
                            onChange={() => setReload(!reload)}
                            style={{width: 150}} placeholder={'请选择'}>
                            {cleanRepeat(Object.assign([], list), 'cost')}
                        </Select>
                    </Form.Item>
                    <Form.Item name={"time"}
                               label={'有效时间'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请选择有效时间'}]}
                               style={{marginBottom: 15}}>
                        <RangePicker/>
                    </Form.Item>
                    <Form.Item name={"remark"}
                               label={'备注说明'}
                               labelCol={{span: 6}}
                               style={{marginBottom: 15}}>
                        <Input.TextArea allowClear rows={2} placeholder={'请输入备注'}/>
                    </Form.Item>
                    <Form.Item name={'buttons'} style={{marginTop: 10, textAlign: 'center'}}>
                        <Button
                            htmlType="submit" type={'primary'}
                        >提交</Button>
                        <Button style={{marginLeft: 15}}
                                onClick={onCancel}
                        >取消</Button>
                    </Form.Item>
                </Form>
            </div>
        </Modal>
    );
};

const AdvertisingSetModal = ({visible, advertisingDate = false, onSubmit, onCancel, form, detail = {}}) => {
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (visible) {
            if (detail.advertisetingid) {
                form.setFieldsValue({
                    advertisetingtype: detail.advertisetingtype,
                    sort: detail.sort,
                    cost: detail.cost,
                    longtimes: detail.longtimes,
                    remark: detail.remark,
                });
            }
        } else {
            form.resetFields();
        }
    }, [visible]);

    const onFinish = (values) => {
        setLoading(true);
        let url = mUrl.addadvertiseting;
        if (detail.advertisetingid) {
            url = mUrl.upAdvertiseting;
            values.advertisetingid = detail.advertisetingid;
        }
        const index = advertisingList.findIndex((item) => item.value === values.advertisetingtype);
        if (index !== -1) {
            values.advertisetingname = advertisingList[index].name;
        }
        values.advertisetingstate = 1;
        post(url, values).then((res) => {
            setLoading(false);
            if (res.state === 1) {
                onSubmit();
            }
        });
    };

    return (
        <Modal
            visible={visible}
            confirmLoading={loading}
            title={advertisingDate ? '修改广告位' : '新增广告位'}
            onCancel={onCancel}
            footer={false}
            getContainer={false}
        >
            <div>
                <Form form={form} onFinish={onFinish}>
                    <Form.Item name={"advertisetingtype"}
                               label={'广告位'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请选择'}]}
                               style={{marginBottom: 15}}>
                        <Select style={{width: 150}} placeholder={'请选择'}>
                            {
                                advertisingList.map((item) => {
                                    return (
                                        <Select.Option
                                            key={item.value} value={item.value}>
                                            {item.name}
                                        </Select.Option>
                                    );
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name={"sort"}
                               label={'排名'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请输入排名'}]}
                               style={{marginBottom: 15}}>
                        <InputNumber min={1} placeholder={'请输入'}/>
                    </Form.Item>
                    <Form.Item name={"cost"}
                               label={'广告费用'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请输入广告费用'}]}
                               style={{marginBottom: 15}}>
                        <InputNumber min={0} placeholder={'请输入'}/>
                    </Form.Item>
                    <Form.Item name={"longtimes"}
                               label={'周期'}
                               labelCol={{span: 6}}
                               rules={[{required: true, message: '请输入周期'}]}
                               style={{marginBottom: 15}}>
                        <InputNumber
                            onChange={(value) => form.setFieldsValue({longtimes: value})}
                            min={1} placeholder={'请输入'}/>&nbsp;&nbsp;天
                    </Form.Item>
                    <Form.Item name={"remark"}
                               label={'备注说明'}
                               labelCol={{span: 6}}
                               style={{marginBottom: 15}}>
                        <Input.TextArea rows={2} placeholder={'请输入备注'}/>
                    </Form.Item>
                    <Form.Item name={'buttons'} style={{marginTop: 10, textAlign: 'center'}}>
                        <Button
                            htmlType="submit" type={'primary'}
                        >提交</Button>
                        <Button style={{marginLeft: 15}}
                                onClick={onCancel}
                        >取消</Button>
                    </Form.Item>
                </Form>
            </div>
        </Modal>
    );
};

// const SearchList = ({onSubmit, form}) => {
//
//     const onFinish = (values) => {
//         onSubmit(values);
//     };
//
//     return (
//         <div style={{padding: 14,display:'flex'}}>
//             <Form form={form} onFinish={onFinish}>
//                 <Row justify="start">
//                     <Col span={3}>
//                         <Form.Item name={"status"}
//                                    label={'状态'}
//                                    labelCol={{span: 6}}
//                                    style={{marginBottom: 15}}>
//                             <Select style={{width: 150}} placeholder={'请选择'}>
//                                 <Select.Option value={''}>全部</Select.Option>
//                                 <Select.Option value={'1'}>待审批</Select.Option>
//                                 <Select.Option value={'2'}>已通过</Select.Option>
//                                 <Select.Option value={'3'}>已取消</Select.Option>
//                             </Select>
//                         </Form.Item>
//                     </Col>
//                     <Col span={3}>
//                         <Form.Item name={"name"}
//                                    label={'申请人'}
//                                    labelCol={{span: 6}}
//                                    style={{marginBottom: 15}}>
//                             <Input style={{width: 150}} placeholder={'申请人/联系方式'}/>
//                         </Form.Item>
//                     </Col>
//                     <Col span={3}>
//                         <Form.Item name={"name"}
//                                    label={'审批人'}
//                                    labelCol={{span: 6}}
//                                    style={{marginBottom: 15}}>
//                             <Input style={{width: 150}} placeholder={'请输入审批人'}/>
//                         </Form.Item>
//                     </Col>
//                     <Button
//                         style={{marginLeft:600}}    
//                         htmlType="submit" 
//                         type={'primary'}
//                     >搜索</Button>
//                 </Row>
//             </Form>
//         </div>
//     );
// };

const mapStateToProps = (state) => {
    return {
        ...state.appReducer, // 全局的reducers
    };
};

export default connect(mapStateToProps)(Page);
